<!-- 分页 -->
<template>
  <div class="row justify-end q-mt-md pagination-wrepper area">
    <div class="text-grey-7 q-mr-sm every row">
      <div class="text-grey-7">
        共{{ pagination.rowsNumber || 0 }}条
      </div>
      <q-select dense borderless options-dense v-model="pageSize" :options="pageSizes"
       class="q-ml-md" input-debounce="500" behavior="menu" popup-content-style="position:absolute;z-index:99999999;">
      </q-select>
    </div>
    <q-pagination unelevated ellipses direction-links icon-prev="bi-caret-left-fill" icon-next="bi-caret-right-fill"
      v-model="currentPage" active-color="primary" active-text-color="white" :max="pagesNumber" size="sm" :max-pages="5"
      boundary-numbers class="q-mr-lg pagination-style" />
    <div class="q-mr-xs lastGO" style="color:#999999;">
      前往
      <span class="inline-block q-ml-xs sc-design-page">
        <q-input class="inline-block q-mr-xs" color="primary" dense borderless
          :class="toPage <= 100 ? 'widthCss' : toPage >= 1000 ? 'widthCss3' : 'widthCss2'" v-model="toPage"
          @blur="updateToPage(toPage)" @keyup.enter="updateToPage(toPage)" />
        页
        <q-icon size="20px" class="cursor-pointer" color="grey-7" name="refresh" @click="handlerRefresh"></q-icon>
      </span>
    </div>


  </div>

</template>

<script>
export default {
  props: {
    scope: {
      type: Object,
      default() {
        return {}
      }
    },
    pagination: {
      type: Object,
      default() {
        return {}
      }
    },
    pageSizes: {
      type: Array,
      default() {
        return ['5条/页', '10条/页', '20条/页', '30条/页']
      }
    }
  },
  data() {
    return {
      toPage: 1
    };
  },

  components: {},

  computed: {
    pagesNumber() {
      return Math.ceil(this.pagination.rowsNumber / this.pagination.rowsPerPage)
    },
    currentPage: {
      get() {
        return this.pagination.page
      },
      set(val) {
        this.$emit('updatePage', val)
      }
    },
    pageSize: {
      get() {
        return this.pageSizes.find(item => parseFloat(item) === this.pagination.rowsPerPage)
      },
      set(val) {
        this.$emit('updateSizes', val)
      }
    }
  },
  watch: {
  },

  mounted() { },

  methods: {
    handlerRefresh() {
      this.toPage = 1
      this.$emit('handlerRefresh')
    },
    // 前往多少页
    updateToPage(val) {
      let _val = val
      if (val <= 0) this.toPage = 1
      if (val > this.pagesNumber) this.toPage = this.pagesNumber
      this.$emit('updatePage', this.toPage)
    }
  }
}

</script>
<style lang='scss' scoped>
.widthCss {
  width: 25px;
}

.widthCss2 {
  width: 40px;
}

.widthCss3 {
  width: 50px;
}

.pagination-wrepper {
  height: 40px;
  line-height: 40px;
}

.rowsPerPage {
  height: 20px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
  background: #F1F1F1;
}

::v-deep(.pagination-style) {
  .q-btn-item {
    margin-left: 5px;
    height: 20px;
    background: #F1F1F1;
    color: white !important;
  }

  .q-btn--unelevated {
    .q-btn__content {
      color: white !important;
    }
  }

  .q-btn__content {
    font-size: 9px;
    color: #b4b0b0;
  }
}

::v-deep(.sc-design-page) {
  .q-field--dense {
    .q-field__control {
      height: 20px;
      background: #F1F1F1;
    }
  }

  .q-field--dense {
    .q-field__marginal {
      height: 20px;
    }
  }

  .q-field__native,
  .q-field__prefix,
  .q-field__suffix,
  .q-field__input {
    color: #999999;
    height: 20px;
    text-align: center;
  }
}

@media (max-width: 500px) {
  .area {
    justify-content: center;
    text-align: center;
    height: 120px;

    // border:1px solid red;
    .pagination-style {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-right: 0px !important;
    }

    .every {
      width: 100%;
      display: flex;
      justify-content: center;
      height: 20px;
      margin-right: 0px !important;
    }

    .lastGO {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-right: 0px !important;
    }
  }
}
</style>
